<template>
  <h2>子组件</h2>
  <h3>{{ msg }}</h3>
  <h3>{{ num }}</h3>
  <h3>{{ obj }}</h3>
  <button @click="change">修改数据</button>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
let msg = ref("hello world");
let num = ref(123);
let obj = reactive({
  name: "小米",
  age: 18,
});

let change = () => {
  msg.value = "哈哈哈哈哈";
  num.value = 999999999999;
  obj.age = 88;
  obj.name = "张三";
  send();
};
// 自定义事件
let $emit = defineEmits(["fn1", "fn2", "fn3"]);

// 触发自定义事件
let send = () => {
  $emit("fn1", msg);
  $emit("fn2", num);
  $emit("fn3", obj);
};
send();
</script>

<style scoped></style>
